<template>
  <div class="updatenav">
    <div class="box" :class="`var-elevation--3`">
      <var-icon
        class="left"
        @click="update"
        name="refresh"
        color="#aaa"
        :size="20"
      />
      <var-icon
        class="right"
        @click="updateIP"
        name="map-marker-outline"
        color="#aaa"
        :size="20"
      />
      <span>
        <i v-if="$store.state.now.updateTime">
          『 {{ $store.state.now.updateTime.substr(11, 5) }} 』
        </i>
        更新
      </span>
    </div>
  </div>
</template>

<script setup>
import { useStore } from 'vuex'

const store = useStore()

const update = () => {
  store.state.loadingTip = true
  store.dispatch('getWeather', store.state.cityid)

  setTimeout(() => {
    store.state.loadingTip = false
  }, 1500)
}

const updateIP = () => {
  store.state.loadingTip = true
  store.dispatch('getAutoIP')

  setTimeout(() => {
    store.state.loadingTip = false
  }, 1500)
}
</script>

<style lang="less" scoped>
.box {
  position: relative;
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;

  border-radius: 5px;
  background: #fff;
  color: #aaa;

  span {
    position: absolute;
    left: 40px;

    font-size: 12px;
    text-align: left;

    i {
      font-size: 15px;
    }
  }

  .left {
    position: absolute;
    left: 15px;
  }
  .right {
    position: absolute;
    right: 15px;
  }
}
</style>
